<!--提现申请管理-->
<template>
  <div id="memberUserWithdrawalApplication" class="app-container">
    <!--搜索条件-->
    <div class="filter-container">
      <el-form :model="listQuery" :inline="true">
        <el-form-item>
          <el-input v-model="listQuery.keyword" clearable placeholder="请输入关键字" @keyup.enter.native="handleFilter" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" plain @click="handleFilter">搜索</el-button>
          <el-button icon="el-icon-refresh" plain @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!--列表-->
    <div class="table-container flex-main">
      <el-tabs v-model="listQuery.status" class="common-tabs" @tab-click="handleTabClick">
        <el-tab-pane label="全部" name="-1" />
        <el-tab-pane label="审核中" name="0" />
        <el-tab-pane label="审批通过" name="1" />
        <el-tab-pane label="审批拒绝" name="2" />
        <el-tab-pane label="打款中" name="3" />
        <el-tab-pane label="转账成功" name="4" />
        <el-tab-pane label="转账失败" name="5" />
      </el-tabs>
      <div class="table-container-header">
        <table-toolbar :create="false" :remove="false" @refresh="handleFilter">
          <template slot="rightTool">
            <export-drop-down :actions="['memberUserWithdrawalApplicationExportData','memberUserWithdrawalApplicationGetExportProcessStatus']" :list-query="listQuery" :async="true" text="提现申请" />
          </template>
        </table-toolbar>
      </div>
      <el-table
        ref="multipleTable"
        :data="list"
        header-cell-class-name="table-header"
        fit
        height="100%"
        highlight-current-row
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
        @sort-change="sortChange">
        <el-table-column type="selection" width="60" />
        <el-table-column align="center" prop="id" label="#" width="60">
          <template slot-scope="scope">{{ scope.$index+1 }}</template>
        </el-table-column>
        <el-table-column label="提现单号/申请时间" prop="id" :show-overflow-tooltip="true" width="150">
          <template slot-scope="scope">
            <div>{{ scope.row.no }}</div>
            <div class="color-default">{{ scope.row.gmtCreated | formatDate('yyyy-MM-dd hh:mm:ss') }}</div>
          </template>
        </el-table-column>
        <el-table-column label="批次号/通知时间" prop="batchId" :show-overflow-tooltip="true" width="320">
          <template slot-scope="scope">
            <div>{{ scope.row.batchId }}</div>
            <div class="color-default">{{ scope.row.notifyTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</div>
          </template>
        </el-table-column>
        <el-table-column label="提现金额" prop="costPrice" width="120">
          <template slot-scope="scope">
            <span class="color-danger" style="font-size: 15px;font-weight: bold;">{{ scope.row.money | formatPrice }}</span>
          </template>
        </el-table-column>
        <el-table-column label="提现人员" prop="userPhone" width="120" show-overflow-tooltip />
        <el-table-column label="提现状态" prop="status" width="100" sortable show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.status===0" class="color-default">审核中</span>
            <span v-if="scope.row.status===1" class="color-primary">审批通过</span>
            <span v-if="scope.row.status===2" class="color-danger">
              审批拒绝
              <el-tooltip class="item" effect="dark" :content="scope.row.statusDesc" placement="bottom">
                <i v-if="scope.row.statusDesc" class="el-icon-question" />
              </el-tooltip>
            </span>
            <span v-if="scope.row.status===3" class="color-success">打款中</span>
            <span v-if="scope.row.status===4" class="color-primary">转账成功</span>
            <span v-if="scope.row.status===5" class="color-warning">
              转账失败
              <el-tooltip class="item" effect="dark" :content="scope.row.statusDesc" placement="bottom">
                <i v-if="scope.row.statusDesc" class="el-icon-question" />
              </el-tooltip>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="提现渠道" prop="channelWay" width="100" sortable show-overflow-tooltip />
        <el-table-column label="提现原因" prop="reason" min-width="300" show-overflow-tooltip />
        <el-table-column label="操作" align="center" fixed="right" width="90">
          <template slot-scope="scope">
            <button-option v-if="scope.row.status===0" type="text" skin="primary" title="审核" @click="handleExamine(scope.row)">审核</button-option>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination_handler">
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData" />
    </div>

    <!--新增/编辑侧边栏-->
    <side-box :show="sideBox.recordShow" :title="sideBox.title" @close="sideBox.recordShow = !sideBox.recordShow">
      <template slot="body">
        <el-form
          ref="dataForm"
          :rules="memberUserWithdrawalApplicationRules"
          :model="memberUserWithdrawalApplicationRecord"
          label-position="right"
          label-width="120px">
          <el-form-item label="提现用户:" prop="userPhone">{{ memberUserWithdrawalApplicationRecord.userPhone }}  </el-form-item>
          <el-form-item label="小程序:" prop="userPhone">{{ memberUserWithdrawalApplicationRecord.openId }}  </el-form-item>
          <el-form-item label="提现单号:" prop="no">{{ memberUserWithdrawalApplicationRecord.no }} </el-form-item>
          <el-form-item label="提现金额:" prop="money">{{ memberUserWithdrawalApplicationRecord.money }}  </el-form-item>
          <el-form-item label="提现原因:" prop="reason">{{ memberUserWithdrawalApplicationRecord.reason }} </el-form-item>
          <el-form-item label="审批状态:" prop="status">
            <el-radio-group v-model="memberUserWithdrawalApplicationRecord.status">
              <el-radio :label="1">通过并打款</el-radio>
              <el-radio :label="2">拒绝</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="审批描述:" prop="statusDesc">
            <el-input v-model="memberUserWithdrawalApplicationRecord.statusDesc" :rows="4" type="textarea" maxlength="100" show-word-limit placeholder="请输入审批描述" />
          </el-form-item>
        </el-form>
      </template>
      <template slot="foot">
        <el-button type="primary" plain @click="doExamine">审批 </el-button>
      </template>
    </side-box>
  </div>
</template>

<script>
export default {
  components: {},

  data() {
    return {
      list: [],
      total: 0,
      listQuery: {
        page: 1,
        limit: this.common.PAGE_LIMIT_DEFAULT,
        keyword: undefined,
        status: '0',
        sort: this.common.SORT_DEFAULT
      },

      multipleSelectionRecords: [],
      // 固定写法
      sideBox: {
        recordShow: false,
        title: '',
        status: 'create'
      },
      memberUserWithdrawalApplicationRecord: {},
      memberUserWithdrawalApplicationRules: {
        status: [
          { required: true, message: '请选择审核状态', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    handleTabClick() {
      this.handleFilter()
    },
    // 表格自带方法开始
    /* 全选/反选*/
    handleSelectionChange(val) {
      this.multipleSelectionRecords = val
    },
    /* 表格行数据单击*/
    handleRowClick(row) {
      this.$refs.multipleTable.toggleRowSelection(row)
    },
    /* 表格列排序*/
    sortChange(data) {
      const { prop, order } = data
      if (prop) {
        if (order === 'ascending') {
          this.listQuery.sort = '+' + prop
        } else {
          this.listQuery.sort = '-' + prop
        }
      } else {
        this.listQuery.sort = this.common.SORT_DEFAULT
      }
      this.handleFilter()
    },
    // 表格自带方法结束

    /* 搜索*/
    handleFilter() {
      this.listQuery = {
        ...this.listQuery,
        page: 1
      }
      this.fetchData()
    },
    /* 重置*/
    handleReset() {
      this.listQuery = {
        ...this.listQuery,
        page: 1,
        limit: this.common.PAGE_LIMIT_DEFAULT,
        keyword: undefined,
        status: '0',
        sort: this.common.SORT_DEFAULT
      }
      this.$refs.multipleTable.clearFilter()
      this.$refs.multipleTable.clearSort()
      this.fetchData()
    },
    async fetchData() {
      const response = await this.$store.dispatch('memberUserWithdrawalApplicationPage', this.listQuery)
      this.list = response.records
      this.total = response.total
    },

    handleExamine(row) {
      this.memberUserWithdrawalApplicationRecord = Object.assign({}, row) // copy obj
      this.memberUserWithdrawalApplicationRecord = {
        ...this.memberUserWithdrawalApplicationRecord,
        status: 1,
        statusDesc: ''
      }
      this.sideBox = {
        status: 'examine',
        recordShow: true,
        title: '提现审批'
      }
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    doExamine() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          const tempData = Object.assign({}, this.memberUserWithdrawalApplicationRecord)
          this.$store.dispatch('memberUserWithdrawalApplicationExamine', tempData).then(response => {
            console.log(111111111)
            this.sideBox.recordShow = false
            this.$modal.msgSuccess('审批成功')
            this.handleFilter()
          }).catch(() => {
            this.sideBox.recordShow = true
          })
        }
      })
    }

  }
}
</script>
<style lang="scss" scoped>
</style>
